<!--<template>-->
<!--  <div class="login-container">-->
<!--    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">-->

<!--      <div class="title-container">-->
<!--        <h3 class="title">商家后台管理系统</h3>-->
<!--      </div>-->

<!--      <el-form-item prop="username">-->
<!--        <span class="svg-container">-->
<!--          <svg-icon icon-class="user" />-->
<!--        </span>-->
<!--        <el-input-->
<!--          ref="username"-->
<!--          v-model="loginForm.username"-->
<!--          placeholder="用户名"-->
<!--          name="username"-->
<!--          type="text"-->
<!--          tabindex="1"-->
<!--          auto-complete="on"-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item prop="password">-->
<!--        <span class="svg-container">-->
<!--          <svg-icon icon-class="password" />-->
<!--        </span>-->
<!--        <el-input-->
<!--          :key="passwordType"-->
<!--          ref="password"-->
<!--          v-model="loginForm.password"-->
<!--          :type="passwordType"-->
<!--          placeholder="密码"-->
<!--          name="password"-->
<!--          tabindex="2"-->
<!--          auto-complete="on"-->
<!--          @keyup.enter.native="handleLogin"-->
<!--        />-->
<!--&lt;!&ndash;        <span class="show-pwd" @click="showPwd">&ndash;&gt;-->
<!--&lt;!&ndash;          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />&ndash;&gt;-->
<!--&lt;!&ndash;        </span>&ndash;&gt;-->
<!--      </el-form-item>-->

<!--      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button><div class="tips">-->

<!--        &lt;!&ndash; <span style="margin-right:20px;">username: admin</span>-->
<!--        <span> password: any</span> &ndash;&gt;-->
<!--      </div>-->

<!--    </el-form>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'Login',-->
<!--  data() {-->
<!--    const validateUsername = (rule, value, callback) => {-->
<!--      if (value.length === 0) {-->
<!--        callback(new Error('用户名不能为空'))-->
<!--      } else {-->
<!--        callback()-->
<!--      }-->
<!--    }-->
<!--    const validatePassword = (rule, value, callback) => {-->
<!--      if (value.length === 0) {-->
<!--        callback(new Error('密码不能为空'))-->
<!--      } else {-->
<!--        callback()-->
<!--      }-->
<!--    }-->
<!--    return {-->
<!--      loginForm: {-->
<!--        username: 'admin',-->
<!--        password: 'admin'-->
<!--      },-->
<!--      loginRules: {-->
<!--        username: [{ required: true, trigger: 'blur', validator: validateUsername }],-->
<!--        password: [{ required: true, trigger: 'blur', validator: validatePassword }]-->
<!--      },-->
<!--      loading: false,-->
<!--      passwordType: 'password',-->
<!--      redirect: undefined-->
<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    $route: {-->
<!--      handler: function(route) {-->
<!--        this.redirect = route.query && route.query.redirect-->
<!--      },-->
<!--      immediate: true-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    // 获取地理位置-->
<!--    var geolocation = new BMapGL.Geolocation()-->
<!--    // 判断浏览器类型-->
<!--    var ua = navigator.userAgent.toLowerCase()-->
<!--    var isFirefox = ua.indexOf('firefox') !== -1-->
<!--    var isChrome = ua.indexOf('chrome') !== -1 && ua.indexOf('safari') !== -1-->
<!--    geolocation.getCurrentPosition(function(r) {-->
<!--      if (this.getStatus() === BMAP_STATUS_SUCCESS) {-->
<!--        const province = r.address.province-->
<!--        let city = r.address.city-->
<!--        const district = r.address.district-->
<!--        const street = r.address.street-->
<!--        // 处理火狐浏览器返回的地理位置信息格式-->
<!--        if (isFirefox) {-->
<!--          city = r.address.city-->
<!--        }-->
<!--        // 处理谷歌浏览器返回的地理位置信息格式-->
<!--        if (isChrome) {-->
<!--          if (city === '市辖区' || city === '县') {-->
<!--            city = r.address.province + r.address.district-->
<!--          }-->
<!--        }-->
<!--        console.log('=======', province)-->
<!--        console.log('=======', city)-->
<!--        console.log('=======', district)-->
<!--        console.log('=======', street)-->
<!--        // alert(province + city + district + street)-->
<!--        localStorage.setItem('location', province.trim() + ' ' + city.trim() + ' ' + district.trim() + ' ' + street.trim())-->
<!--      }-->
<!--    })-->
<!--  },-->

<!--  methods: {-->
<!--    // showPwd() {-->
<!--    //   if (this.passwordType === 'password') {-->
<!--    //     this.passwordType = ''-->
<!--    //   } else {-->
<!--    //     this.passwordType = 'password'-->
<!--    //   }-->
<!--    //   // this.$nextTick(() => {-->
<!--    //   //   this.$refs.password.focus()-->
<!--    //   // })-->
<!--    // },-->
<!--    // 登录业务-->
<!--    handleLogin() {-->
<!--      // 验证用户名密码是否符合规则-->
<!--      this.$refs.loginForm.validate(valid => {-->
<!--        // 如果符合规则-->
<!--        if (valid) {-->
<!--          // loading效果-->
<!--          this.loading = true-->
<!--          localStorage.setItem('user', this.loginForm.username)-->
<!--          // localStorage.setItem('password', this.loginForm.password)-->
<!--          // dispach到action：user/login-->
<!--          this.$store.dispatch('user/login', this.loginForm).then(() => {-->
<!--            debugger-->
<!--            // 登录成功，路由跳转-->
<!--            this.$router.push({ path: this.redirect || '/' })-->
<!--            this.loading = false-->
<!--            this.$message({-->
<!--              type: 'success',-->
<!--              message: '登录成功'-->
<!--            })-->
<!--          }).catch(() => {-->
<!--            this.loading = false-->
<!--          })-->
<!--        } else {-->
<!--          console.log('error submit!!')-->
<!--          return false-->
<!--        }-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--&lt;!&ndash;<style lang="scss">&ndash;&gt;-->
<!--&lt;!&ndash;/* 修复input 背景不协调 和光标变色 */&ndash;&gt;-->
<!--&lt;!&ndash;/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */&ndash;&gt;-->

<!--&lt;!&ndash;$bg:#283443;&ndash;&gt;-->
<!--&lt;!&ndash;$light_gray:#fff;&ndash;&gt;-->
<!--&lt;!&ndash;$cursor: #fff;&ndash;&gt;-->

<!--&lt;!&ndash;@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {&ndash;&gt;-->
<!--&lt;!&ndash;  .login-container .el-input input {&ndash;&gt;-->
<!--&lt;!&ndash;    color: $cursor;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;/* reset element-ui css */&ndash;&gt;-->
<!--&lt;!&ndash;.login-container {&ndash;&gt;-->
<!--&lt;!&ndash;  .el-input {&ndash;&gt;-->
<!--&lt;!&ndash;    display: inline-block;&ndash;&gt;-->
<!--&lt;!&ndash;    height: 47px;&ndash;&gt;-->
<!--&lt;!&ndash;    width: 85%;&ndash;&gt;-->

<!--&lt;!&ndash;    input {&ndash;&gt;-->
<!--&lt;!&ndash;      background: transparent;&ndash;&gt;-->
<!--&lt;!&ndash;      border: 0px;&ndash;&gt;-->
<!--&lt;!&ndash;      -webkit-appearance: none;&ndash;&gt;-->
<!--&lt;!&ndash;      border-radius: 0px;&ndash;&gt;-->
<!--&lt;!&ndash;      padding: 12px 5px 12px 15px;&ndash;&gt;-->
<!--&lt;!&ndash;      color: $light_gray;&ndash;&gt;-->
<!--&lt;!&ndash;      height: 47px;&ndash;&gt;-->
<!--&lt;!&ndash;      caret-color: $cursor;&ndash;&gt;-->

<!--&lt;!&ndash;      &:-webkit-autofill {&ndash;&gt;-->
<!--&lt;!&ndash;        box-shadow: 0 0 0px 1000px $bg inset !important;&ndash;&gt;-->
<!--&lt;!&ndash;        -webkit-text-fill-color: $cursor !important;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .el-form-item {&ndash;&gt;-->
<!--&lt;!&ndash;    border: 1px solid rgba(255, 255, 255, 0.1);&ndash;&gt;-->
<!--&lt;!&ndash;    background: rgba(0, 0, 0, 0.1);&ndash;&gt;-->
<!--&lt;!&ndash;    border-radius: 5px;&ndash;&gt;-->
<!--&lt;!&ndash;    color: #454545;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</style>&ndash;&gt;-->

<!--&lt;!&ndash;<style lang="scss" scoped>&ndash;&gt;-->
<!--&lt;!&ndash;$bg:#2d3a4b;&ndash;&gt;-->
<!--&lt;!&ndash;$dark_gray:#889aa4;&ndash;&gt;-->
<!--&lt;!&ndash;$light_gray:#eee;&ndash;&gt;-->

<!--&lt;!&ndash;.login-container {&ndash;&gt;-->
<!--&lt;!&ndash;  min-height: 100%;&ndash;&gt;-->
<!--&lt;!&ndash;  width: 100%;&ndash;&gt;-->
<!--&lt;!&ndash;  // background-color: $bg;&ndash;&gt;-->
<!--&lt;!&ndash;  background: url(~@/assets/bg3.png);&ndash;&gt;-->
<!--&lt;!&ndash;  background-size: 100% 100%;&ndash;&gt;-->
<!--&lt;!&ndash;  overflow: hidden;&ndash;&gt;-->

<!--&lt;!&ndash;  .login-form {&ndash;&gt;-->
<!--&lt;!&ndash;    position: relative;&ndash;&gt;-->
<!--&lt;!&ndash;    width: 520px;&ndash;&gt;-->
<!--&lt;!&ndash;    max-width: 100%;&ndash;&gt;-->
<!--&lt;!&ndash;    padding: 160px 35px 0;&ndash;&gt;-->
<!--&lt;!&ndash;    margin: 0 auto;&ndash;&gt;-->
<!--&lt;!&ndash;    overflow: hidden;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .tips {&ndash;&gt;-->
<!--&lt;!&ndash;    font-size: 14px;&ndash;&gt;-->
<!--&lt;!&ndash;    color: #fff;&ndash;&gt;-->
<!--&lt;!&ndash;    margin-bottom: 10px;&ndash;&gt;-->

<!--&lt;!&ndash;    span {&ndash;&gt;-->
<!--&lt;!&ndash;      &:first-of-type {&ndash;&gt;-->
<!--&lt;!&ndash;        margin-right: 16px;&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .svg-container {&ndash;&gt;-->
<!--&lt;!&ndash;    padding: 6px 5px 6px 15px;&ndash;&gt;-->
<!--&lt;!&ndash;    color: $dark_gray;&ndash;&gt;-->
<!--&lt;!&ndash;    vertical-align: middle;&ndash;&gt;-->
<!--&lt;!&ndash;    width: 30px;&ndash;&gt;-->
<!--&lt;!&ndash;    display: inline-block;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .title-container {&ndash;&gt;-->
<!--&lt;!&ndash;    position: relative;&ndash;&gt;-->

<!--&lt;!&ndash;    .title {&ndash;&gt;-->
<!--&lt;!&ndash;      font-size: 26px;&ndash;&gt;-->
<!--&lt;!&ndash;      color: #283443;&ndash;&gt;-->
<!--&lt;!&ndash;      margin: 0px auto 40px auto;&ndash;&gt;-->
<!--&lt;!&ndash;      text-align: center;&ndash;&gt;-->
<!--&lt;!&ndash;      font-weight: bold;&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->

<!--&lt;!&ndash;  .show-pwd {&ndash;&gt;-->
<!--&lt;!&ndash;    position: absolute;&ndash;&gt;-->
<!--&lt;!&ndash;    right: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;    top: 7px;&ndash;&gt;-->
<!--&lt;!&ndash;    font-size: 16px;&ndash;&gt;-->
<!--&lt;!&ndash;    color: $dark_gray;&ndash;&gt;-->
<!--&lt;!&ndash;    cursor: pointer;&ndash;&gt;-->
<!--&lt;!&ndash;    user-select: none;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</style>&ndash;&gt;-->

<template>
  <div id="mainContainer" v-title class="cont1" data-title="若梦管理系统">
    <p class="tip">Click on button in image container</p>
    <div class="cont" style="border-radius: 15px">
      <div class="form sign-in" style="line-height: 50px;">
        <h2 style="margin-top: 1px">基于微信小程序的蛋糕店系统的设计与实现</h2>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-form-item label="手机号" prop="phone" style="width: 50%;margin-left: 110px;margin-top: 80px">
            <el-input
              v-model.number="formData.phone"
              placeholder="请输入手机号"
              :maxlength="11"
              show-word-limit
              clearable
              prefix-icon="el-icon-mobile-phone"
              :style="{width: '200px'}"
            />
          </el-form-item>
          <el-form-item label="验证码" prop="yzm" style="width: 50%;margin-left: 110px;margin-top: 50px">
            <el-input
              v-model.number="formData.yzm"
              :maxlength="6"
              :minlength="6"
              clearable
              show-word-limit
              prefix-icon="el-icon-chat-round"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              :style="{width: '200px'}"
            >
              <template #append>
                <el-button
                  class="test"
                  style="width: 5px;
                margin-right: 10px;
                text-align: center;
                background-color: inherit;"
                  type="danger"
                  :disabled="remainingTime > 0"
                  @click="startTimer"
                >
                  {{ remainingTime > 0 ? '('+remainingTime+'s)' : '获取' }}
                </el-button>
              </template>

            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              class="submit"
              @click.native.prevent="submitForm"
            >登录
            </el-button>
          </el-form-item>
        </el-form>

      </div>
      <div class="sub-cont">
        <div class="img">
          <div class="img__text m--up">
            <h2>第一次来?</h2>
            <p>注册并发现大量的新机会!</p>
          </div>
          <div class="img__text m--in">
            <h2>加入我们 ?</h2>
            <p>如果你已经有一个账户,只需登录即可 </p>
            <span>We've missed you!</span>
          </div>
          <div class="img__btn">
            <span class="m--up">邮箱登录</span>
            <span class="m--in">手机登录</span>
          </div>
        </div>
        <div class="form sign-up" style="line-height: 50px">
          <h2>Time to feel like home</h2>
          <el-form ref="elForm2" :model="formData" :rules="rules2" size="medium" label-width="100px">
            <el-form-item label="电子邮箱" prop="email" style="width: 50%;margin-left: 110px;margin-top: 80px">
              <el-input
                v-model="formData.email"
                placeholder="请输入邮箱"
                show-word-limit
                clearable
                prefix-icon="el-icon-message"
                :style="{width: '200px'}"
              />
            </el-form-item>
            <el-form-item label="验证码" prop="yzm2" style="width: 50%;margin-left: 110px;margin-top: 50px">
              <el-input
                v-model.number="formData.yzm2"
                :maxlength="6"
                :minlength="6"
                clearable
                show-word-limit
                prefix-icon="el-icon-chat-round"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                :style="{width: '200px'}"
              >
                <template #append>
                  <el-button
                    class="test"
                    style="width: 5px;
                margin-right: 10px;
                text-align: center;
                background-color: inherit;"
                    type="danger"
                    :disabled="remainingTime > 0"
                    @click="startTimer2"
                  >
                    {{ remainingTime > 0 ? '('+remainingTime+'s)' : '获取' }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                :loading="loading2"
                class="submit"
                @click.native.prevent="submitForm2"
              >登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Login',
  props: {
    msg: String
  },
  data() {
    return {
      username: '',
      remainingTime: 0,
      loading: false,
      loading2: false,
      timer: null,
      formData: {
        pwd: '',
        phone: '',
        email: '',
        yzm: '',
        yzm2: ''
      },
      rules: {
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'change'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        yzm: [
          { required: true, message: '验证码不能为空', trigger: 'change' }
          // {type: 'number', message: '验证码必须为数字', trigger: ['blur', 'change']}
        ]
      },
      rules2: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'change' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        yzm2: [
          { required: true, message: '验证码不能为空', trigger: 'change' }
          // {type: 'number', message: '验证码必须为数字', trigger: ['blur', 'change']}
        ]
      },
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {
    // 获取地理位置
    var geolocation = new BMapGL.Geolocation()
    // 判断浏览器类型
    var ua = navigator.userAgent.toLowerCase()
    var isFirefox = ua.indexOf('firefox') !== -1
    var isChrome = ua.indexOf('chrome') !== -1 && ua.indexOf('safari') !== -1
    geolocation.getCurrentPosition(function(r) {
      if (this.getStatus() === BMAP_STATUS_SUCCESS) {
        const province = r.address.province
        let city = r.address.city
        const district = r.address.district
        const street = r.address.street
        // 处理火狐浏览器返回的地理位置信息格式
        if (isFirefox) {
          city = r.address.city
        }
        // 处理谷歌浏览器返回的地理位置信息格式
        if (isChrome) {
          if (city === '市辖区' || city === '县') {
            city = r.address.province + r.address.district
          }
        }
        console.log('=======', province)
        console.log('=======', city)
        console.log('=======', district)
        console.log('=======', street)
        // alert(province + city + district + street)
        localStorage.setItem('location', province.trim() + ' ' + city.trim() + ' ' + district.trim() + ' ' + street.trim())
      }
    }),
    document.querySelector('.img__btn').addEventListener('click', function() {
      const contEl = document.querySelector('.cont')
      contEl.classList.toggle('s--signup')
      contEl.addEventListener('transitionend', function() {
        if (contEl.classList.contains('s--signup')) {
          contEl.querySelectorAll('input').forEach(inputEl => inputEl.value = '')
        }
      }, { once: true })
    })
  },
  beforeDestroy() {
    // eslint-disable-next-line no-irregular-whitespace
    clearInterval(this.timer) // 清除定时器
    this.timer = null
  },
  methods: {
    // 手机号登录
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        const user = {
          phone: this.formData.phone,
          code: this.formData.yzm
        }
        this.timer = setTimeout(() => {
          // loading效果
          this.loading = true
          if (this.formData.phone == '17677777777') {
            this.username = 'admin'
            localStorage.setItem('user', this.username)
          } else {
            this.username = 'zaocan'
            localStorage.setItem('user', this.username)
          }
          // localStorage.setItem('password', this.loginForm.password)
          // dispach到action：user/login
          this.$store.dispatch('user/login', user).then(() => {
            // 登录成功，路由跳转
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
            this.$message({
              type: 'success',
              message: '登录成功'
            })
          }).catch(() => {
            this.loading = false
          })
        }, 1000)
      })
    },
    // 邮箱登录
    submitForm2() {
      this.$refs['elForm2'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        // 显示loading 加载效果
        this.loading2 = true
        const user = {
          email: this.formData.email,
          code: this.formData.yzm2
        }
        this.timer = setTimeout(() => {
          // loading效果
          this.loading = true
          if (this.formData.email == '1292673018@qq.com') {
            this.username = 'admin'
            localStorage.setItem('user', this.username)
          } else {
            this.username = 'zaocan'
            localStorage.setItem('user', this.username)
          }
          // localStorage.setItem('user', this.loginForm.username)
          // localStorage.setItem('password', this.loginForm.password)
          // dispach到action：user/login
          this.$store.dispatch('user/login', user).then(() => {
            // 登录成功，路由跳转
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
            this.$message({
              type: 'success',
              message: '登录成功'
            })
          }).catch(() => {
            this.loading = false
          })
        }, 1000)
      })
    },
    // 发送手机验证码
    async sendCode() {
      // TODO 提交表单
      const user = { phone: this.formData.phone }
      console.log(user)
      const res = await this.$API.admin.reqSendPhone(user)
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '验证码发送成功!'
        })
      } else {
        this.$message({
          type: 'warning',
          message: '验证码发送失败!'
        })
      }
    },

    startTimer() {
      this.$refs['elForm'].validateField('phone', valid => {
        if (valid) return
        // TODO 提交表单
        this.remainingTime = 60
        this.sendCode()
        const timer = setInterval(() => {
          this.remainingTime--
          if (this.remainingTime === 0) {
            clearInterval(timer)
          }
        }, 1000)
      })
    },
    startTimer2() {
      this.$refs['elForm2'].validateField('email', valid => {
        if (valid) return
        // TODO 提交表单
        this.remainingTime = 60
        this.sendCodeTwo()
        const timer = setInterval(() => {
          this.remainingTime--
          if (this.remainingTime === 0) {
            clearInterval(timer)
          }
        }, 1000)
      })
    },
    // 发送邮箱验证码
    async sendCodeTwo() {
      // TODO 提交表单
      const user = { email: this.formData.email }
      console.log(user)
      const res = await this.$API.admin.reqSendEmail(user)
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '验证码发送成功!'
        })
      } else {
        this.$message({
          type: 'warning',
          message: '验证码发送失败!'
        })
      }
    }
  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input, button {
  border: none;
  outline: none;
  background: none;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.tip {
  font-size: 20px;
  margin: 40px auto 50px;
  text-align: center;
}

.cont1::before {
  content: '';
  position: fixed;
  background-color: #ededed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: linear-gradient(to bottom right ,#d3dae9,#14c2c2)
}

.cont {
  overflow: hidden;
  position: relative;
  width: 900px;
  height: 550px;
  margin: 0 auto 100px;
  background: #fff;
}

.form {
  position: relative;
  width: 640px;
  height: 100%;
  transition: transform 1.2s ease-in-out;
  padding: 50px 30px 0;
}

.sub-cont {
  overflow: hidden;
  position: absolute;
  left: 640px;
  top: 0;
  width: 900px;
  height: 100%;
  padding-left: 260px;
  background: #fff;
  transition: transform 1.2s ease-in-out;
}

.cont.s--signup .sub-cont {
  transform: translate3d(-640px, 0, 0);
}

button {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 36px;
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.img {
  overflow: hidden;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 100%;
  padding-top: 360px;
}

.img:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 900px;
  height: 100%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg");
  background-size: cover;
  transition: transform 1.2s ease-in-out;
}

.img:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.cont.s--signup .img:before {
  transform: translate3d(640px, 0, 0);
}

.img__text {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  transition: transform 1.2s ease-in-out;
}

.img__text h2 {
  margin-bottom: 10px;
  font-weight: normal;
}

.img__text p {
  font-size: 14px;
  line-height: 1.5;
}

.cont.s--signup .img__text.m--up {
  transform: translateX(520px);
}

.img__text.m--in {
  transform: translateX(-520px);
}

.cont.s--signup .img__text.m--in {
  transform: translateX(0);
}

.img__btn {
  overflow: hidden;
  z-index: 2;
  position: relative;
  width: 100px;
  height: 36px;
  margin: 0 auto;
  background: transparent;
  color: #fff;
  text-transform: uppercase;
  font-size: 15px;
  cursor: pointer;
}

.img__btn:after {
  content: "";
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 30px;
}

.img__btn span {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: transform 1.2s;
}

.img__btn span.m--in {
  transform: translateY(-72px);
}

.cont.s--signup .img__btn span.m--in {
  transform: translateY(0);
}

.cont.s--signup .img__btn span.m--up {
  transform: translateY(72px);
}

h2 {
  width: 100%;
  font-size: 26px;
  text-align: center;
}

label {
  display: block;
  width: 260px;
  margin: 25px auto 0;
  text-align: center;
}

label span {
  font-size: 12px;
  color: #cfcfcf;
  text-transform: uppercase;
}

input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  text-align: center;
}

.forgot-pass {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #cfcfcf;
}

.submit {
  margin-top: 30px;
  margin-left: 50px;
  margin-bottom: 10px;
  background: #d4af7a;
  /*text-transform: uppercase;*/
}

.style2 {
  margin-top: 10px;
  margin-right: 100px;
  margin-bottom: 10px;
  background: darkgrey;
  text-transform: uppercase;
}

.fb-btn {
  border: 2px solid #d3dae9;
  color: #8fa1c7;
}

.fb-btn span {
  font-weight: bold;
  color: #455a81;
}

.sign-in {
  transition-timing-function: ease-out;
}

.cont.s--signup .sign-in {
  transition-timing-function: ease-in-out;
  transition-duration: 1.2s;
  transform: translate3d(640px, 0, 0);
}

.sign-up {
  transform: translate3d(-900px, 0, 0);
}

.cont.s--signup .sign-up {
  transform: translate3d(0, 0, 0);
}

.icon-link {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 32px;
}

.icon-link img {
  width: 100%;
  vertical-align: top;
}

.icon-link--twitter {
  left: auto;
  right: 5px;
}
.test[disabled]:not(.is-loading) {
  opacity: 0.5;
  cursor: not-allowed;
  width: 5px;
  margin-right: 10px;
  text-align: center;
}

</style>
